﻿@model Sys_Role
@{
	ViewBag.Title = (Model.ID > 0 ? "修改" : "新增") + "角色";
}
@section header{
	<link href="~/lib/select2/select2.min.css" rel="stylesheet" asp-append-version="true" />
	<style>
		.detail-content-info, .detail-content-label {
			padding: 3px;
		}
	</style>
}
@section quickmenu{
	<td style="padding-right: 0px; padding-left: 10px;">
		<span style="cursor: pointer;" title="返回..." @@click="pageBack">
			<i class="icon-reply icon-2x pull-left icon-border crm-bu-style"></i>
		</span>
	</td>
}

<table style="border:0;margin:0;border-spacing:0;width:100%;padding:0 15px 50px 15px;overflow:auto;table-layout:fixed;">
	<tbody>
		<tr>
			<td class="detail-left-td">
				<div class="detail-panel-div">
					<div class="detail-inner">
						<div class="detail-name-div" title="@(Model.ID>0?Model.Name:"新增角色")">
							@(Model.ID > 0 ? Model.Name : "新增角色")
						</div>
					</div>
					<div class="detail-heading">
						相关记录
					</div>
					<div class="detail-inner detail-related">
						<div class="detail-list-div-disabled" v-for="(ritem) in related">
							{{ritem.name}}
						</div>
					</div>
					<div class="detail-exit">&nbsp;</div>
				</div>
			</td>
			<td style="vertical-align:top;" class="detail-content-td">
				<div style="width:100%;margin:0;padding:0;" v-show="viewid=='main'">
					<table style="width:100%;">
						<tr>
							<td style="vertical-align:top;">
								<form id="frmEdit">
									<div class="detail-panel-div" style="position:relative;">
										<table border="0" cellspacing="0" cellpadding="5" style="height:42px;width:100%;">
											<tbody>
												<tr class="detail-content-heading" style="height: 28px;">
													<td colspan="2">
														<b>&nbsp;基本信息&nbsp;</b>
													</td>
												</tr>
												<tr>
													<td colspan="2">
														<table border="0" cellspacing="0" cellpadding="0" style="width:100%;">
															<tr style="height: 25px">
																<td class="detail-content-label label-required" width="20%">
																	角色名称
																</td>
																<td class="detail-content-info" width="30%">
																	<input type="text" class="detailedViewTextBox validate[required]" v-model.trim="model.Name" @(Model.Reserved?"readonly":"")>
																</td>
																<td class="detail-content-label label-required" width="20%">
																	角色编码
																</td>
																<td class="detail-content-info" width="30%">
																	<input type="text" class="detailedViewTextBox input-sm validate[required]" v-model.trim="model.Code" @(Model.Reserved?"readonly":"")>
																	@*<button class="pure-button pure-button-approve pure-icon-bu" style="width: 23px; height: 21px;margin-right:5px;" title="检测是否可用" onclick="checkRoleCode();return false;">
																			<i class="icon-user-check"></i>
																		</button>*@
																</td>
															</tr>
															<tr style="height: 25px">
																<td class="detail-content-label">
																	角色说明
																</td>
																<td class="detail-content-info" colspan="3">
																	<input type="text" class="detailedViewTextBox" v-model="model.Comment" @(Model.Reserved?"readonly":"")/>
																</td>
															</tr>
															<tr style="height: 25px">
																<td class="detail-content-label">
																	排序值
																</td>
																<td class="detail-content-info">
																	<input type="number" class="detailedViewTextBox input-sm" v-model="model.Sort" />
																</td>
																<td class="detail-content-label">
																</td>
																<td class="detail-content-info">
																</td>
															</tr>
															<tr style="height: 25px">
																<td class="detail-content-label">
																	是否允许修改
																</td>
																<td class="detail-content-info">
																	<input type="checkbox" class="" :checked="!model.Freezed" @@change="handleChangeFreezed($event)" />
																</td>
																<td class="detail-content-label">
																	是否系统保留（系统保留的不能删除）
																</td>
																<td class="detail-content-info">
																	<input type="checkbox" class="" v-model="model.Reserved" />
																</td>
															</tr>
															<tr style="height: 25px">
																<td class="detail-content-label">
																	功能权限
																</td>
																<td class="detail-content-info" colspan="3">
																	<ul id="roleTree" class="ztree" style=""></ul>
																</td>
															</tr>
														</table>
													</td>
												</tr>
												<tr style="height: 38px;">
													<td style="text-align:center;">
														<button class="pure-button pure-button-edit" onclick="$('#frmEdit').submit();return false;" style="margin-right:50px;">
															<i class="icon-check"></i>&nbsp;保存&nbsp;
														</button>
														<button class="pure-button" @@click.prevent='pageBack'>
															<i class="icon-undo"></i>&nbsp;取消&nbsp;
														</button>
													</td>
												</tr>
											</tbody>
										</table>
									</div>
								</form>
							</td>
							<td class="detail-right-td" style="">
								<div class="detail-panel-div">
									<div class="detail-inner">
										<table border="0" cellpadding="5" cellspacing="0" class="module-tool-tab" style="width:100%;">
											<tr>
												<td align="left" class="genHeaderSmall" style="padding:5px;">操作</td>
											</tr>
											<tr>
												<td align="left" style="padding:5px;">
													<img src="~/theme/img/pointer.gif" hspace="5" />
													<a href="javascript:viewDetailLog(@((int)ST.Buz.Base.Enums.TableCode.Sys_Role),@(Model.ID));" class="webMnu">修改日志</a>
												</td>
											</tr>
										</table>
									</div>
								</div>
							</td>
						</tr>
					</table>
				</div>
			</td>
		</tr>
	</tbody>
</table>
@section footer{
	<script src="~/js/related/sys_attachment.js" asp-append-version="true"></script>
	@*日期必须开始*@
	<script src="~/lib/laydate/laydate.js" asp-append-version="true"></script>
	@*日期必须结束*@
	<script src="~/lib/select2/select2.min.js" asp-append-version="true"></script>
	@*验证开始*@
	<script src="~/lib/validationEngine/jquery.validationEngine.min.js" asp-append-version="true"></script>
	<script src="~/lib/validationEngine/jquery.validationEngine-zh_CN.js" asp-append-version="true"></script>
	<link href="~/lib/validationEngine/validationEngine.jquery.css" rel="stylesheet" asp-append-version="true" />
	@*验证结束*@
	@*列表相关开始*@
	<script type="text/javascript">
		var pageEnumData = {
			state:@(Json.Serialize(ViewBag.StateOptions)),
		};
		var modelJson=@(Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model,new Newtonsoft.Json.JsonSerializerSettings()
				   {
				   DateFormatString = "yyyy-MM-dd HH:mm:ss"
					})));
		var modelData = $.extend(modelJson, {
		});
		var pageData = {
			hideBreadcrumb: false,
			serviceCode: '@(ViewBag.ServiceCode)',
			global: globalData,
			viewid: 'main',
			related: @(Json.Serialize(ViewBag.RelatedModules)),
			model:modelData
		};

		var pageApp = new Vue({
			el: '#app',
			data: pageData,
			created: function () {
			},
			mounted: function () {
			},
			methods: {
				pageBack() {
					//history.go(-1);
					if (@(Model.ID>0?"true":"false")) {
						history.back();
					} else {
						location.href = '@(Url.Action("List", "Sys_Role"))?nc=' + new Date().getTime();
					}
				},
				pageSave() {
					utils.ajaxPost('@(Url.Action("Save", "Sys_Role"))', this.model, function (resp) {
						console.log(resp.data);
						utils.success("保存成功");
						location.href = '@(Url.Action("ViewDetail", "Sys_Role",new {id="" }))/'+resp.data+'?nc=' + new Date().getTime();
					}, function (msg) {
						utils.alert(msg);
					});
				},
				relatedSysAttachmentChange: function (vid, e) {
					switch (e.action) {
						case "total":
							{
								this.related = this.related.map(function (item) {
									if (item.id == vid) {
										return Object.assign({}, item, { count: e.data });
									} else {
										return item;
									}
								});
							}
							break;
					}
				},
				handleChangeFreezed(e) {
					modelData.Freezed=!e.target.checked;
				},
				changeView(vid) {
					this.viewid = vid;
					this.$refs[vid]&&this.$refs[vid].reload();
				},
				resetView() {
					this.viewid = 'main';
				}
			},
			computed: {
				currentM: function () {
					var currentM = null;
					var i;
					var j;
					for (i = 0; i < this.global.modules.length; i++) {
						for (j = 0; j < this.global.modules[i].Services.length; j++) {
							if (this.serviceCode == this.global.modules[i].Services[j].Code) {
								currentM = this.global.modules[i];
								break;
							}
						}
					}
					return currentM;
				},
				currentS: function () {
					var currentS = null;
					var i;
					var j;
					for (i = 0; i < this.global.modules.length; i++) {
						for (j = 0; j < this.global.modules[i].Services.length; j++) {
							if (this.serviceCode == this.global.modules[i].Services[j].Code) {
								currentS = this.global.modules[i].Services[j];
								break;
							}
						}
					}
					return currentS;
				}
			}
		});

		$(document).ready(function () {
			$("#frmEdit").keypress(function (e) {
				if (e.keyCode == 13) {
					return false;
				}
			}).validationEngine({
				scroll: false,
				validateNonVisibleFields: false,
				autoHidePrompt: true,
				showOneMessage: true,
				ajaxFormValidationMethod: 'post',
				onValidationComplete: function (form, status) {
					if (!status) {
						return;
					}
					pageApp.pageSave();
				}
			});
		});

		function openDept() {
			var $input = $('#DeptID');
			var srcPos = $input.offset();
			layer.open({
				title: false,
				type: 2,
				area: ['400px', '450px'],
				fixed: true, //不固定
				closeBtn:1,
				icon: 2,   //加载的icon类型
				offset: [(srcPos.top + $input.height() + 8) + "px", srcPos.left + "px"],
				content: '@(Url.Action("PopList","Sys_Dept"))?callback=popDeptCallback',
			});
		}

		function popDeptCallback(ret) {
			modelData.DeptID = ret.id;
			modelData.DeptName = ret.name;
		}

		function clearDept() {

		}

		function checkRoleCode() {

		}
	</script>
	@*列表相关结束*@
	@*区域相关开始*@
	<link href="~/lib/ztree/ztree.css" rel="stylesheet" asp-append-version="true" />
	<script src="~/lib/ztree/ztree.core-3.5.37.min.js" asp-append-version="true"></script>
	<script src="~/lib/ztree/ztree.excheck-3.5.37.min.js" asp-append-version="true"></script>
	<script type="text/javascript">
		var roleTreeSetting = {
			check: {
				enable: true
			},
			view: {
				selectedMulti: false
			},
			data: {
			},
			callback: {
				onCheck: roleTreeOnCheck,
			}
		};

		function roleTreeOnCheck(event, treeId, treeNode) {
			var nodesChecked = $.fn.zTree.getZTreeObj(treeId).getCheckedNodes();
			var id;
			var actions = [];
			for (i = 0; i < nodesChecked.length; i++) {
				if (nodesChecked[i].id.indexOf('s') < 0 && nodesChecked[i].id.indexOf('m') < 0) {
					id = parseInt(nodesChecked[i].id);
					actions.push(id);
				}
			}
			modelData.ModuleConfig.Actions = actions;
		}

		function initRoleTree() {
			var roleModule = modelData.ModuleConfig || {};
			var modules = roleModule.Modules || [];
			var actions = roleModule.Actions || [];
			var treeData = [];
			var i, j, k;
			for (i = 0; i < modules.length; i++) {
				treeData.push({ id: 'm' + modules[i].ID, name: modules[i].Name, open: true, children: [] });
				for (j = 0; j < modules[i].Services.length; j++) {
					treeData[i].children.push({ id: 's' + modules[i].Services[j].ID, name: modules[i].Services[j].Name, open: true, children: [] });
					for (k = 0; k < modules[i].Services[j].Actions.length; k++) {
						treeData[i].children[j].children.push({ id: modules[i].Services[j].Actions[k].ID.toString(), name: modules[i].Services[j].Actions[k].Name, checked: actions.indexOf(modules[i].Services[j].Actions[k].ID) >= 0 });
					}
				}
			}
			var $roleTree = $.fn.zTree.init($("#roleTree"), roleTreeSetting, treeData);
			var nodesChecked = $roleTree.getCheckedNodes();
			for (i = 0; i < nodesChecked.length; i++) {
				$roleTree.checkNode(nodesChecked[i], true, true);
			}
		}

		$(document).ready(function () {
			initRoleTree();
		});
	</script>
	@*区域相关结束*@
}